<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;">
      <el-table-column
        label="申请ID"
        prop="id"
        align="center"
        width="100">
      </el-table-column>
      <el-table-column label="商户名" prop="shop_name" align="center" width="160" />
      <el-table-column label="真实姓名" prop="real_name" align="center" width="140" />
      <el-table-column label="商品标题" prop="title" align="center" width="140" />
      <el-table-column label="商品描述" prop="content" align="center" width="140" />
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="adoptEvent(scope.row)" type="primary" size="small">通过</el-button>
          <el-button @click="backEvent(scope.row)" type="danger" size="small">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { list, save, deleted } from '@/api/shopgoods'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import vSearch from '@/components/Search'

export default {
  components: {
    Pagination,
    vSearch
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-id',
        where: [
          // { field: 'type', op: 'eq', value: 1 },
          { field: 'status', op: 'eq', value: 1 }
        ]
      },
      downloadLoading: false,
      importanceOptions: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      list(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    // 通过
    adoptEvent(item) {
      this.$confirm(`确定通过【${item.title}】的请求吗？`, item.title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$store.commit('SHOW_LOADING')
        save({
          type: 1,
          id: item.id
        }).then(res => {
          this.$message({
            type: 'success',
            message: '操作'
          })
          this.list.splice(this.list.findIndex(c => c.id === item.id), 1)
          this.$store.commit('HIDE_LOADING')
        })
      })
    },
    // 驳回申请
    backEvent(item) {
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S+/,
        inputErrorMessage: '请输入理由'
      }).then(({ value }) => {
        this.$store.commit('SHOW_LOADING')
        save({
          type: 2,
          id: item.id,
          info: value
        }).then(res => {
          this.$message({
            type: 'success',
            message: '操作'
          })
          this.list.splice(this.list.findIndex(c => c.id === item.id), 1)
          this.$store.commit('HIDE_LOADING')
        })
      })
    },
    deleteEvent(item) {
      deleted(item.id)
    },
    searchData(data) {
      this.listQuery.page = 1
      this.listQuery.where = []
      if (data.selected) {
        this.listQuery.where.push({
          field: 'admin_log.admin_uid',
          op: 'eq',
          value: data.selected
        })
      }
      if (data.dateStart) {
        this.listQuery.where.push({
          field: 'admin_log.action_time',
          op: 'between',
          value: [data.dateStart, data.dateEnd]
        })
      }
      this.getList()
    }
  }
}
</script>

<style>
.box {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;
}
.picture {
  max-width: 40%;
}
</style>
